<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/js/sweetalert.min-2.1.2.js"></script>
    <style type="text/css">
        .gro {
            margin-bottom: 0px;
        }

        .ope {
            margin-left: 30px;
        }

        body::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }

        .content::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var strArr = new Array(4);
            $.ajax({
                url: "../user.do",
                type: "post",
                data: {
                    action: "getUser"
                },
                success: function (data) {
                    console.log(data)
                    var parse = JSON.parse(data);
                    var myData = parse.data;
                    if (parse.code == 1) {
                        var username = myData.username;
                        var nickname = myData.nickname;
                        var phone = myData.phone;
                        var email = myData.email;
                        var logoUrl = myData.logoUrl;
                        $("#logoImg").attr("src", logoUrl)
                        $("#viewLogo").attr("src", logoUrl)
                        strArr[0] = username;
                        strArr[1] = nickname;
                        strArr[2] = phone;
                        strArr[3] = email;
                        $("#username").val(username);
                        $("#nickname").val(nickname);
                        $("#phone").val(phone);
                        $("#email").val(email);
                    } else {
                        swal("提示", "用户未登录,请移步登录页面", "error").then(function (isOk) {
                        })
                    }
                }
            });
            // $(".form-control").attr("disabled","disabled");

            $("#update").click(function () {
                $(".form-control").removeAttr("disabled");
                $("#username").attr("disabled", "disabled");
                $("#submit").removeAttr("disabled");
            });
            $("#cancel").click(function () {
                $(".form-control").attr("disabled", "disabled");
                $("#submit").attr("disabled", "disabled");
            });
            $("#submit").click(function () {
                console.log("begin")
                var username = $("#username").val().trim();
                var nickname = $("#nickname").val().trim();
                var phone = $("#phone").val().trim();
                var email = $("#email").val().trim();
                if (username === strArr[0] && nickname === strArr[1] && phone === strArr[2] && email === strArr[3]) {
                    swal("警告", "用户信息未修改", "error").then(function (isOk) {
                    });
                    return;
                }
                $.ajax({
                    url: "../user.do",
                    type: "post",
                    data: {
                        action: "update",
                        username: username,
                        nickname: nickname,
                        phone: phone,
                        email: email
                    },
                    success: function (data) {
                        console.log(data)
                        var result = JSON.parse(data);
                        if (result.code === 1) {
                            swal("提示", "用户信息修改成功", "success").then(function (isOk) {
                            });
                        } else {
                            swal("警告", "用户信息修改失败", "error").then(function (isOk) {
                            });
                        }
                    }
                });

            });

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }

            $("#logoFile").change(function (event) {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#viewLogo").attr("src", objUrl); //将图片路径存入src中，显示出图片
                }
            });
            $("#uploadBtn").click(function () {
                console.log(1215253425);
                var logoFile = document.getElementById("logoFile").files[0];
                var formData = new FormData();
                formData.append("action","uploadLogo");
                formData.append("uploadLogo",logoFile);
                $.ajax({
                    async: false,
                    processData : false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false, //必须false才会自动加上正确的Content-Type

                    url:"../user.do",
                    type:"POST",
                    data:formData,
                    success:function (data) {
                        var result = JSON.parse(data);
                        if (result.code===1){
                            swal("提示", result.message, "success").then(function (isOk) {
                                window.location.reload()
                            });
                        }else {
                            swal("警告", result.message, "error").then(function (isOk) {});
                        }

                    }

                });
            });

        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2 col-sm-2"></div>
            <div class="col-md-8 col-sm-8">
                <form>
                    <div class="form-group">
                        <img src="../uploadFile/images/19.png" id="logoImg"
                             style="width: 100px;height: 100px;margin-left: auto;margin-right: auto;margin-top:100px;border-radius: 50%;"
                             class="img-responsive" alt="Responsive image">
                    </div>
                    <button type="button" style="position: relative;top: -2px;left: 190px;" class="btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#uploadLogoModel" id="editInfo">修改头像
                    </button>
                    <div class="form-group">
                        <label for="username" class="">用户名</label>
                        <input type="text" class="form-control" disabled="disabled" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="nickName">昵称</label>
                        <input type="text" class="form-control" disabled="disabled" id="nickname" placeholder="昵称">
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="text" class="form-control" disabled="disabled" id="phone" placeholder="手机号">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" disabled="disabled" id="email" placeholder="邮箱">
                    </div>
                    <div class="form-group" style="text-align: center">
                        <button type="button" class="btn btn-primary" id="cancel">取消</button>
                        <button type="button" class="btn btn-primary" id="update">修改</button>
                        <br><br>
                        <button type="button" class="btn btn-primary" disabled style="width: 100px" id="submit">提交
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="edit">
    <div class="modal fade" id="uploadLogoModel" tabindex="-1" role="dialog" aria-labelledby="editUserLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editUserLabel">上传/修改头像</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <form class="form-horizontal" action="../user.do?action=update">
                                <div class="form-group">
                                    <label for="logoFile" class="col-sm-3 control-label">头像</label>
                                    <div class="col-sm-9">
                                        <input type="file" class="form-control" id="logoFile" name="logo">
                                    </div>
                                </div>
                            </form>
                            <img src="" id="viewLogo" alt="" width="100px" style="margin-left: 200px">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-md-4 col-sm-4">
                            <button type="button" class="btn btn-primary opera" id="uploadBtn">修改</button>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
